<template>
  <!-- <div class="table">
    <div class="toolbar">
      <a-space>
        <span class="title">操作记录列表</span>
      </a-space>
      <a-space>
        <refresh />
        <lineheight style="margin: 0 6px" />
        <column />
      </a-space>
    </div>
    <div class="content">
      <table-content />
    </div>
  </div> -->
  <card>
    <template #title>
      <div class="title-wrap">
        <span>操作记录列表</span>
        <teleport to="#toolbar-right" defer>
          <div style="display: flex; align-items: center">
            <search />
          </div>
        </teleport>
      </div>
    </template>
    <template #more>
      <a-space>
        <refresh />
        <lineheight style="margin: 0 6px" />
        <column /> </a-space
    ></template>
    <template #content>
      <table-content />
    </template>
  </card>
</template>
<script setup>
import { useProvideContextRegistry } from './provide-context.js'
import TableContent from './table-content.vue'
import refresh from './table-toolbar-refresh.vue'
import lineheight from './table-toolbar-lineheight.vue'
import column from './table-toolbar-column.vue'
import search from './search.vue'
useProvideContextRegistry()
</script>
<style lang="less" scoped>
.toolbar {
  border-bottom: 1px solid #f2f2f2;
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
  }

  .content {
    flex: 1;
    overflow: hidden;
    margin-top: 11px;
  }
}
.title-wrap {
  display: flex;
  white-space: nowrap;
  align-items: center;
  span {
    margin-right: 12px;
  }
}
</style>
